<script setup lang="ts">
import { toRefs, onBeforeMount, reactive, watch } from 'vue'
import ArrowVue from '@/components/icon/Arrow.vue';
import NewsItem1 from '@/components/News-item1.vue';
import NewsItem2 from '@/components/News-item2.vue';
const props = defineProps({
  obj: {
    type: Object,
    default: () => ({}) as Record<string, any>
  },
})

const { obj } = toRefs(props)
const state = reactive({
  main: {} as any,
  list: [] as any,
  last: [] as any,
})
onBeforeMount(() => {
  state.main = obj.value.detail
  state.list = obj.value.right_list
  state.last = obj.value.bottom_list
})
watch(obj, (val: any) => {
  state.main = val.detail
  state.list = val.right_list
  state.last = val.bottom_list
})
</script>

<template>
  <div class="container">
    <div class="news-wrapper pt-5">
      <div class="top flex mb-4">
        <router-link class="left flex-shrink" :to="'/news/article?id=' + state.main?.id">
          <div class="img mb-3 shadow">
            <img :src="state.main?.display_image" :alt="state.main?.title">
          </div>
          <div class="info">
            <div class="title-wrapper flex font-md">
              <div class="date-wrap text-muted">
                <span class="year font-sm">{{ state.main?.year }}</span>
                <span class="md">{{ state.main?.create_at }}</span>
              </div>
              <div class="title flex-1 line-1">{{ state.main?.title }}</div>
            </div>
            <div class="desc-wrap">
              <div class="desc text-muted line-2">{{ state.main?.introduce }}</div>
            </div>
            <div class="read color-bg flex-center">
              <ArrowVue color="#fff"></ArrowVue>
            </div>
          </div>
        </router-link>
        <div class="right flex-1 flex-min">
          <NewsItem1 v-for="item in state.list" :key="item.id" :item="item"></NewsItem1>
        </div>
      </div>
      <div class="bot flex">
        <NewsItem2 class="flex-1 item-box" v-for="item in state.last" :key="item.id" :item="item"></NewsItem2>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.news-wrapper {
  .left {
    position: relative;
    width: 488px;
    margin-right: 80px;
    padding-bottom: 30px;
    cursor: pointer;

    .img {
      position: relative;
      width: 488px;
      height: 274px;
      border: solid 4px #000;
      border-radius: 12px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .title-wrapper {
      height: 30px;
      line-height: 30px;
    }

    .date-wrap {
      width: 70px;

      .year {
        display: none;
      }
    }

    .title {
      color: #000;
    }

    .desc-wrap {
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .desc {
      font-size: 12px;
      line-height: 20px;
      margin-left: 72px;
      border-left: solid 1px transparent;
      transition: all .36s ease;
    }

    .read {
      position: absolute;
      bottom: -10px;
      width: 100px;
      height: 25px;
      margin-left: 72px;
      border-radius: 10px;
      transition: all .36s ease;
      opacity: 0;
    }

    &:hover {
      .desc {
        padding-left: 23px;
        border-color: #C2C2C2;
      }

      .read {
        bottom: 10px;
        opacity: 1;
      }
    }
  }

  .right {}

  .bot {
    .item-box {}
  }
}
</style>
